<div>
    <h2>Loggger</h2>

    <p>There are {{ loggers.length }} loggers.</p>

    {{'logs.filter' }} <input type="text" ng-model="filter" class="form-control">

    <table class="table table-condensed table-striped table-bordered table-responsive">
        <thead>
        <tr title="click to order">
            <th ng-click="predicate = 'name'; reverse=!reverse">Logger Name</th>
            <th ng-click="predicate = 'level'; reverse=!reverse">Logger Level</th>
        </tr>
        </thead>

        <tr ng-repeat="logger in loggers | filter:filter | orderBy:predicate:reverse">
            <td>
                <small>{{logger.name | limitTo: 140}}</small>
            </td>
            <td>
                <button ng-click="changeLevel(logger.name, 'TRACE')"
                        ng-class="(logger.level=='TRACE') ? 'btn-danger' : 'btn-default'"
                        class="btn btn-default btn-xs">TRACE
                </button>
                <button ng-click="changeLevel(logger.name, 'DEBUG')"
                        ng-class="(logger.level=='DEBUG') ? 'btn-warning' : 'btn-default'"
                        class="btn btn-default btn-xs">DEBUG
                </button>
                <button ng-click="changeLevel(logger.name, 'INFO')"
                        ng-class="(logger.level=='INFO') ? 'btn-info' : 'btn-default'" class="btn btn-default btn-xs">
                    INFO
                </button>
                <button ng-click="changeLevel(logger.name, 'WARN')"
                        ng-class="(logger.level=='WARN') ? 'btn-success' : 'btn-default'"
                        class="btn btn-default btn-xs">WARN
                </button>
                <button ng-click="changeLevel(logger.name, 'ERROR')"
                        ng-class="(logger.level=='ERROR') ? 'btn-primary' : 'btn-default'"
                        class="btn btn-default btn-xs">ERROR
                </button>
            </td>
        </tr>
    </table>
</div>
